{% extends "layouts/examples.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
<h1 class="govuk-heading-xl">Small form controls</h1>

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    {{ govukCheckboxes({
      fieldset: {
        legend: {
          text: "Display",
          classes: "govuk-fieldset__legend--s"
        }
      },
      idPrefix: "display",
      name: "sort",
      classes: "govuk-checkboxes--small",
      items: [
        {
          value: "consultations",
          text: "Consultations"
        },
        {
          value: "guidance",
          text: "Guidance"
        },
        {
          value: "notices",
          text: "Notices"
        },
        {
          value: "reports",
          text: "Reports"
        }
      ]
    }) }}

    {{ govukRadios({
      fieldset: {
        legend: {
          text: "Include",
          classes: "govuk-fieldset__legend--s"
        }
      },
      idPrefix: "include",
      name: "include",
      classes: "govuk-radios--small",
      items: [
        {
          value: "everything",
          text: "Everything"
        },
        {
          value: "something",
          text: "Something"
        },
        {
          value: "nothing",
          text: "Nothing"
        }
      ]
    }) }}
  </div>
  <div class="govuk-grid-column-two-thirds">
      {{ govukRadios({
        fieldset: {
          legend: {
            text: "Sort by",
            classes: "govuk-fieldset__legend--s"
          }
        },
        formGroup: {
          classes: "govuk-!-margin-bottom-0"
        },
        idPrefix: "sort",
        name: "sort",
        classes: "govuk-radios--small govuk-radios--inline",
        items: [
          {
            value: "relevance",
            text: "Relevance"
          },
          {
            value: "created",
            text: "Created"
          },
          {
            value: "title",
            text: "Title"
          }
        ]
      }) }}

      {{ govukCheckboxes({
        name: "grobulate",
        classes: "govuk-checkboxes--small",
        formGroup: {
          classes: "govuk-!-margin-bottom-0"
        },
        items: [
          {
            value: "grobulate",
            text: "Grobulate results"
          }
        ]
      }) }}

    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible" style="clear: both;">

    <h2 class="govuk-heading-m">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit</h2>

    <p class="govuk-body">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>

    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">

    <h2 class="govuk-heading-m">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh</h2>

    <p class="govuk-body">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">

    <h2 class="govuk-heading-m">Bibendum Commodo Ullamcorper Vulputate</h2>

    <p class="govuk-body">Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
  </div>
</div>
{% endblock %}
